<!--
 * @Author: hejianbo
 * @Date: 2023-02-24 11:20:10
 * @LastEditors: hejianbo
 * @FilePath: /src/views/activity/components/addMedicalPop.vue
 * @Description: 新增/编辑医药代表
-->
<template>
  <el-dialog append-to-body :title="info ? '编辑' : '新建'" visible width="600px" @close="$emit('close')">
    <el-form :model="ruleForm" :rules="rules" label-width="120px">
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="ruleForm.userName" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobilePhone">
        <el-input v-model="ruleForm.mobilePhone" placeholder="请输入手机号" :disabled="!!info"></el-input>
      </el-form-item>
      <el-form-item label="工号" prop="userCode">
        <el-input v-model="ruleForm.userCode" placeholder="请输入工号"></el-input>
      </el-form-item>
      <el-form-item label="区域" prop="area">
        <el-input v-model="ruleForm.area" placeholder="请输入区域" disabled></el-input>
      </el-form-item>
      <el-form-item label="推广部" prop="department">
        <el-input v-model="ruleForm.department" placeholder="请输入推广部"></el-input>
      </el-form-item>
      <el-form-item label="小组" prop="groupName">
        <el-input v-model="ruleForm.groupName" placeholder="请输入小组"></el-input>
      </el-form-item>

      <el-form-item label="收款账号省份" prop="_province">
        <el-select v-model="ruleForm._province" placeholder="请选择省" @change="changeProvince">
          <el-option
            v-for="item in provinceList"
            :key="item.baseAreaid"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收款账号市" prop="_city">
        <el-select v-model="ruleForm._city" placeholder="请选择市">
          <el-option v-for="item in cityList" :key="item.baseAreaid" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <span slot="footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import * as apis from "@/api/activity.js";

export default {
  name: "ActivityAddMedicalPop",
  components: {},
  props: {
    info: Object,
  },
  data() {
    const userInfo  = this.$store.state.userInfo
    this.rules = {
      userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
      mobilePhone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
      userCode: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
      area: [{ required: true, message: "请输入区域", trigger: "blur" }],
      department: [{ required: true, message: "请输入推广部", trigger: "blur" }],
      groupName: [{ required: true, message: "请输入小组", trigger: "blur" }],
      _province: [{ required: true, message: "请选择省", trigger: "blur" }],
      _city: [{ required: true, message: "请选择市", trigger: "blur" }],
    };

    return {
      provinceList: [],
      cityList: [],

      ruleForm: {
        userName: "",
        mobilePhone: "",
        userCode: "",
        department: "",
        area: userInfo.area,
        groupName: "",

        _province: "", // 省
        _city: "", // 市
      },
    };
  },
  created() {},
  mounted() {
    if (this.info) {
      this.$mergeValueableData(this.ruleForm, this.info);
      if (this.info.province) {
        const arr = this.info.province.split("-");
        this.ruleForm._province = arr[0] || "";
        this.ruleForm._city = arr[1] || "";
      }
    }

    apis.getProvince().then(({ data }) => {
      this.provinceList = data;
      this.getCityList();
    });
  },
  watch: {},
  computed: {},
  methods: {
    changeProvince() {
      this.ruleForm._city = "";
      this.getCityList();
    },
    getCityList() {
      const province = this.provinceList.find((item) => item.name == this.ruleForm._province);
      if (province && province.baseAreaid) {
        apis.getCity(province.baseAreaid).then(({ data }) => {
          this.cityList = data;
        });
      }
    },
    handleConfirm() {
      for (const key in this.rules) {
        const item = this.rules[key][0];
        if (item.verify) {
          if (!item.verify(this.ruleForm[key], this.ruleForm)) {
            return this.$message.error(item.message);
          }
        } else if (!this.ruleForm[key]) {
          return this.$message.error(item.message);
        }
      }

      const params = { ...this.ruleForm };
      params.province = params._province + "-" + params._city;

      if (this.info) {
        apis.activityMedicineUserEdit({ ...params, medicineUserId: this.info.medicineUserId }).then(() => {
          this.$message.success("编辑成功！");
          this.$emit("confirm");
        });
      } else {
        apis.activityMedicineUserAdd({ ...params, projectId: this.$route.params.id }).then(() => {
          this.$message.success("新增成功！");
          this.$emit("confirm");
        });
      }
    },
  },
};
</script>
<style></style>
